<template>
    <div id="building">
    <el-container>
        <el-header style="background-color: #E79335;position: relative" height="40px">
            <div>
            <el-input v-model="inputfirst" style=" margin-top: 6px;margin-left: 400px;width: 400px; height: 25px;position: absolute" placeholder="" >
                <template #append>
                    <el-icon><Search /></el-icon>
                </template>
            </el-input>
            </div>
            <div style="position: absolute;margin-left: 810px">
            <el-avatar
                :src="require('../img/person2.jpg')"
                size="small"
                style="margin-top: 7px;"
                @click="userdetail"
            />
            </div>

            <div style="position: absolute;margin-left: 840px;margin-top: 6px">
                <span @click="userdetail" style="font-size: 0.8em;color: white">用户名</span>
            </div>

            <div style="position: absolute;margin-left: 1000px;margin-top: 10px;color: white;font-size: 0.8em;">
                <span>首页</span>
                <el-divider direction="vertical"></el-divider>
                <span>搜索好友</span>
                <el-divider direction="vertical"></el-divider>
            </div >
            <div style="position: absolute;margin-left: 1130px;margin-top: 6px;">
                <el-image style="width: 25px;height: 25px;"
                          :src="require('../img/haoyou.svg')"></el-image>
                <el-image style="width: 25px;height: 25px;margin-left: 3px"
                          :src="require('../img/duanxin.svg')"></el-image>

                <el-image style="width: 23px;height: 23px;margin-left: 8px"
                          :src="require('../img/xinfeng.svg')"></el-image>

            </div>

            <div  style="position: absolute;margin-left: 1220px;margin-top: 8px">
                <el-divider direction="vertical"></el-divider>
            <el-dropdown>
                <span class="el-dropdown-link">
                    <el-image style="width: 23px;height: 23px;margin-left: 6px"
                    :src="require('../img/help.svg')"></el-image>
                 <el-icon class="el-icon--right">
                    <arrow-down />
                </el-icon>
             </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>健康</el-dropdown-item>
                        <el-dropdown-item>动态记录</el-dropdown-item>
                        <el-dropdown-item>动态消息偏好设置</el-dropdown-item>
                        <el-dropdown-item>设置</el-dropdown-item>
                        <el-dropdown-item divided @click="tuichu">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            </div>
        </el-header>
        <el-main>
                <el-row >
                    <el-col :span="8">

                        <div style="width: 120px;float: right;margin-top: -15px;" >
                            <el-menu
                                active-text-color="#ffd04b"
                                background-color="#f3f3f3"
                                default-active="2"

                            >
                                <el-menu-item index="1" @click="userdetail">
                                    <el-avatar
                                        :src="require('../img/person2.jpg') "
                                    />
                                    <span style="margin-left: 10px">用户名</span>
                                </el-menu-item>
                                <el-menu-item index="2">
                                    <el-icon size="40px"><Comment /></el-icon>
                                    <span>动态资讯</span>
                                </el-menu-item>
                                <el-menu-item index="3">
                                    <el-icon size="40px"><Message /></el-icon>
                                    <span>信息</span>
                                </el-menu-item>
                                <el-menu-item index="4">
                                    <el-icon size="40px"><VideoPlay /></el-icon>
                                    <span>视频</span>
                                </el-menu-item>
                            </el-menu>
                        </div>

                    </el-col>

                    <el-col :span="8" >
                        <div>
                            <div style="margin-top: -5px">
                                <el-input v-model="matter" placeholder="快来分享你的新鲜事吧！">
                                    <template #append>
                                        <el-icon><Picture /></el-icon>
                                        <el-icon><Film /></el-icon>
                                        <el-icon><Headset /></el-icon>
                                        <el-icon><Edit /></el-icon>
                                    </template>
                                </el-input>
                            </div>
                            <div style="margin-top: 10px">
                                <el-card  shadow="hover" >
                                    <div >
                                    <div @click="postdetail">
                                        <div style="float:left;">
                                        <el-avatar
                                            :src="require('../img/docter1.jpg') "
                                        />
                                        </div>
                                        <div style="float: right">
                                            <el-icon><MoreFilled /></el-icon>
                                        </div>

                                            <div style="float:left;">
                                                <el-text style="font-family: 楷体;font-size: large;">
                                                    莫彦翔（教授）
                                                </el-text>
                                            </div>
                                        <br>
                                            <div>
                                                <el-text style="font-size: smaller; color: #CCCCCC">
                                                    8分钟
                                                </el-text>
                                            </div>
                                    <br>
                                    <div>
                                        <el-text style="font-family: 黑体;font-size: large;">
                                            自闭症患者的症状都有哪些呢？
                                        </el-text>
                                    </div>
                                    <div>
                                        <el-text style="font-size: small;">
                                            众所周知，自闭症患者无论是对家庭，还是对社会来说，都是一个沉重的负担，但是如果发现的早，病情还是可以扭转的。大家可以来分享分享自闭症患者的症状，避免有些自闭症患者的家人因为对该病的早期症状不了解，所以耽误了患者病情的治疗。
                                        </el-text>
                                    </div>
                                    <div>
                                        <el-image :src="require('../img/finally.png') "></el-image>
                                    </div>
                                    <div style="margin-top: 5px">
                                        <el-avatar size="small" :src="require('../img/person1.jpg') "></el-avatar>
                                        <el-avatar size="small" :src="require('../img/person2.jpg') "></el-avatar>
                                        <el-avatar size="small" :src="require('../img/person6.jpg') "></el-avatar>
                                        <el-text style="font-size: 0.5em;margin-top: 4px">+163个赞</el-text>
                                        <div style="float: right">
                                            <el-image style="width: 25px;height: 25px;margin-right: 3px" :src="require('../img/like.svg')"></el-image>
                                            <el-image style="width: 25px;height: 25px;margin-right: 3px" :src="require('../img/pinglun.svg')"></el-image>
                                            <el-image style="width: 25px;height: 25px;margin-right: 3px" :src="require('../img/share.svg')"></el-image>
                                        </div>
                                    </div>
                                    </div>
                                        <el-input style="margin-top: 10px" v-model="pinglun" placeholder="写下评论">
                                            <template #append>
                                                <el-image style="width: 25px;height: 25px;"
                                                          :src="require('../img/smile.svg')"></el-image>

                                            </template>
                                        </el-input>
                                    </div>
                                </el-card>
                            </div>
                                <el-card shadow="hover" style="height: 200px;margin-top: 10px">
                                    <div style="margin-top: -10px">
                                    <el-text >推荐咨询</el-text>
                                    </div>
                                    <div style="margin-top: 10px">
                                    <div style="float: left;">
                                    <el-image style="width: 100px;height: 100px" :src="require('../img/docter2.jpg')"/>
                                        <br>
                                    <span style="margin-left: 10px;font-family: Arial">Mike Listo</span>
                                        <br>
                                        <span class="innfo" >心理学教授</span>
                                    </div>

                                    <div style="float: left; margin-left: 15px;">
                                        <el-image style="width: 100px;height: 100px" :src="require('../img/docter4.jpg')"/>
                                        <br>
                                        <span style="margin-left: 10px;font-family: Arial">秦银英</span>
                                        <br>
                                        <span class="innfo">儿童医院医师</span>
                                    </div>
                                    <div style="float: left; margin-left: 15px;">
                                        <el-image style="width: 100px;height: 100px" :src="require('../img/docter3.jpg')"/>
                                        <br>
                                        <span style="margin-left: 10px;font-family: Arial">严冠颖</span>
                                        <br>
                                        <span class="innfo">儿童医院医师</span>
                                    </div>
                                    <div style="float: left; margin-left: 15px;">
                                        <el-image style="width: 100px;height: 100px" :src="require('../img/xinlizixunshi.jpg')"/>
                                        <br>
                                        <span style="margin-left: 10px;font-family: Arial">潘姿莹</span>
                                        <br>
                                        <span class="innfo">心理咨询师</span>
                                    </div>
                                    </div>
                                </el-card>
                        </div>
                    </el-col>

                    <el-col :span="8" >
                        <el-card shadow="hover" style="margin-left: 10px;margin-top: -5px;width: 200px">
                        <div style="margin-top: -15px;margin-left: -15px">
                            <el-text style="color: #F59B22;font-size: large;font-family: 宋体;font-weight: bolder;">护星行动</el-text>
                        </div>
                        <div style="width: 120px;height: 120px;margin-top: 5px;margin-left: 20px">
                            <el-image

                                :src="require('../img/tubiao.jpg')"></el-image>
                        </div>
                        <div style="margin-top: 30px;margin-bottom: 5px;text-align: center">
                            <el-text >守护来自星星的孩子</el-text>
                        </div>
                        <div style="margin-bottom: 5px;text-align: center">
                            <el-text style="color: blue">http://www.hxxd.com</el-text>
                        </div>
                        <div style="margin-right: -15px;margin-top: 10px;margin-bottom: -5px">
                            <el-text style="font-size: small;">我整合现有国内资源、引起社会关注以及推动并引领自闭症治疗工作的进步</el-text>
                        </div>

                        </el-card>

                        <el-card shadow="hover" style="margin-left: 10px;margin-top: 10px;width: 200px">
                            <div style="margin-left: -10px;margin-top: -20px">
                                <el-text >向你推荐好友</el-text>
                            </div>


                                <div style="float:left;margin-top: 6px">
                                <el-avatar
                                    :src="require('../img/person1.jpg')"
                                />
                                </div>



                                <div style="float:left;margin-top: 6px">
                                    <el-text style="font-family: 楷体;font-size: large;">
                                        熊淑媛
                                    </el-text>
                                </div>
                                <br>
                                <div >
                                    <el-text style="font-size: smaller; color: #CCCCCC;margin-left: -50px">
                                        入站3年
                                    </el-text>
                                </div>
                                <br>
                                <div style="float:left;">
                                <el-avatar
                                    :src="require('../img/person3.jpg')"
                                />
                                </div>
                                <div style="float:left;">
                                    <el-text style="font-family: 楷体;font-size: large;">
                                        宋芳如
                                    </el-text>
                                </div>
                                <br>
                                <div>
                                    <el-text style="font-size: smaller; color: #CCCCCC">
                                        入站1年
                                    </el-text>
                                </div>
                                <br>
                                <div style="float:left;">
                                    <el-avatar
                                        :src="require('../img/person4.jpg')"
                                    />
                            </div>
                            <div style="float:left;">
                                <el-text style="font-family: 楷体;font-size: large;">
                                    丁孟君
                                </el-text>
                            </div>
                            <br>
                            <div>
                                <el-text style="font-size: smaller; color: #CCCCCC">
                                    入站8年
                                </el-text>
                            </div>
                            <br>
                            <div style="float:left;">
                                <el-avatar
                                    :src="require('../img/person5.jpg')"
                                />
                            </div>
                            <div style="float:left;">
                                <el-text style="font-family: 楷体;font-size: large;">
                                    许昱廷
                                </el-text>
                            </div>
                            <br>
                            <div>
                                <el-text style="font-size: smaller; color: #CCCCCC">
                                    刚刚注册
                                </el-text>
                            </div>




                        </el-card>
                    </el-col>
                </el-row>

        </el-main>
    </el-container>
    </div>
</template>

<script>

export default {
    name: "myHome",
    data() {
        return {
            matter:'',
            pinglun:'',
            inputfirst:''

        }
    },
    methods : {
        tuichu(){
            this.$router.push('/')
        },
        userdetail(){
            this.$router.push('/user')
        },
        postdetail(){
            this.$router.push('/post')
        }

    }

}
</script>

<style scoped>
#building{
    background-color: #f3f3f3;
    width:100%;
    height:100%;

    background-size:100% 100%;
}
.innfo{
    margin-left: 10px;
    font-family: 微软雅黑;
    font-size: 0.5em;
    color: #CCCCCC
}
</style>
